<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='kmsjsmap.css') }}">
    {#    <script src="jquery-1.10.2/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>#}
    <script src="{{ url_for('static', filename='jquery-1.10.2.js') }}"></script>
    <script src="{{ url_for('static', filename='kmsjsmap.js') }}"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        h3 {
            border-top: solid white 2px;
            border-left: solid white 2px;
            border-right: solid white 2px;
            background: rgba(216, 215, 216, 0.5);
            height: 25px;
            margin: 0;
        {#padding: 10px;#} float: left;
            text-align: center;
            padding: 30px;
        }


        .tab-head {
            height: 70px;
            width: 100%;
        }

        .tab-content {
            padding: 20px;
            height: 100%;
        }

        .tab-content div {
            display: none;
        }

        .selected {
            background-color: white;
            border-top: solid cornflowerblue 5px;
        }

        .tab-content .show {
            display: block;
        }

        table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        table {
            width: 1000px;
            min-height: 25px;
            line-height: 40px;
            text-align: center;
            border-collapse: collapse;
        }

        .horizontal {
            float: left;
        / / 添加float样式即可实现水平排列 border: 1 px solid black;
            margin-left: 20px;
        }
    </style>
</head>

<body>
<div class="tab-head">
    <h3 id="tab1" onmouseover="changeTab1()" class="selected">devices</h3>
    <h3 id="tab2" onmouseover="changeTab2()">types</h3>
    <h3 id="tab3" onmouseover="changeTab3()">connections</h3>
    <h3 id="tab4" onmouseover="changeTab4()">log</h3>
    <h3 id="tab5" onmouseover="changeTab5()">groups</h3>
</div>
<div class="tab-content">
    <div id="c1" class="show">
        <button id="add_device" onclick="add_device()">add new device</button>
        <br><br>
        <table id="table-device">
            <tr>
                <td>device_id</td>
                <td>name</td>
                <td>type</td>
                <td>addr</td>
                <td></td>
            </tr>
            {% for device in devices %}
                <tr>
                    <td>{{ device[0] }}</td>
                    <td>{{ device[1] }}</td>
                    <td>{{ td[device[2]] }}</td>
                    <td>{{ device[3] }}</td>
                    <td>
                        <button onclick="modify_device('{{ device[0] }}','{{ device[1] }}','{{ td[device[2]] }}','{{ device[3] }}')">
                            modify
                        </button>
                        <button onclick="confirm_delete_device({{ device[0] }})">delete</button>
                        <button onclick="paramNames({{ device[0] }})">修改</button>
                        {% if td[device[2]] =="CAMERA" %}
                            <button id="playView{{ device[0] }}" onclick="playView({{ device[0] }})">播放</button>
                        {% endif %}

                    </td>
                </tr>
            {% endfor %}
        </table>

        <span id="device-function"></span>
        <div id="liveDiv" style="display: block"></div>
    </div>
    <div id="c2">
        <button onclick="add_type()">add new type</button>
        <br><br>
        <table id="table-type">
            <tr>
                <td>type_id</td>
                <td>name</td>
                <td>button</td>
            </tr>
            {% for t in td %}
                <tr>
                    <td>{{ t }}</td>
                    <td>{{ td[t] }}</td>
                    <td>
                        <button onclick="modify_type({{ t }},'{{ td[t] }}')">modify</button>
                        <button onclick="confirm_delete_type({{ t }})">delete</button>
                    </td>
                </tr>
            {% endfor %}

        </table>

        <span id="type-function">
        </span>
    </div>
    <div id="c3">
        <button onclick="add_connection()">add new connection</button>
        <button onclick="diagram_show()">关系脑图</button>
        <br><br>
        <table id="table-connection">
            <tr>
                <td>id</td>
                <td>device</td>
                <td>related_device</td>
                <td>related_group</td>
                <td>button</td>
            </tr>
            {% for connection in connections %}
                <tr>
                    <td>{{ connection[0] }}</td>
                    <td>{{ devices_dict[connection[1]] }}</td>
                    {% if connection[2]=="DEVICE" %}
                        <td>{{ devices_dict[connection[3]] }}</td>
                        <td></td>
                        <td>
                            <button onclick="modify_connection({{ connection[0] }},'{{ connection[1] }}','{{ connection[2] }}',{{ connection[3] }})">
                                modify
                            </button>
                            <button onclick="confirm_delete_connection({{ connection[0] }})">delete</button>
                        </td>
                    {% else %}
                        <td></td>
                        <td>{{ gd[connection[4]] }}</td>
                        <td>
                            <button onclick="modify_connection({{ connection[0] }},'{{ connection[1] }}','{{ connection[2] }}',{{ connection[4] }})">
                                modify
                            </button>
                            <button onclick="confirm_delete_connection({{ connection[0] }})">delete</button>
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </table>
        <span id="connection-function"></span>
        <div id="jsmind_container"></div>
    </div>

    <div id="c4">
        <input id="search-text"/>
        <button onclick="search_log()">search</button>
        <br><br>
        <table id="table-log">
            <tr>
                <td>id</td>
                <td>task_id</td>
                <td>sender_id</td>
                <td>sender_name</td>
                <td>interface</td>
                <td>addressee_id</td>
                <td>addressee_name</td>
                <td>status_code</td>
                <td>describe</td>
                <td>implement_time</td>
            </tr>

            {% for execution_log in execution_logs %}
                <tr>
                    <td>{{ execution_log[0] }}</td>
                    <td>{{ execution_log[1] }}</td>
                    <td>{{ execution_log[2] }}</td>
                    <td>{{ execution_log[3] }}</td>
                    <td>{{ execution_log[4] }}</td>
                    <td>{{ execution_log[5] }}</td>
                    <td>{{ execution_log[6] }}</td>
                    <td>{{ execution_log[7] }}</td>
                    <td>{{ execution_log[8] }}</td>
                    <td>{{ execution_log[9] }}</td>
                </tr>
            {% endfor %}
        </table>

    </div>

    <div id="c5">
        <button onclick="add_group()">add new groups</button>
        <br><br>
        <table id="table-groups">
            <tr>
                <td>group_id</td>
                <td>group_name</td>
                <td>device_names</td>
            </tr>

            {% for g in glist %}
                <tr>
                    <td>{{ g[0] }}</td>
                    <td>{{ g[1] }}</td>
                    <td>{{ g[3] }}</td>
                    <td>
                        <button onclick="modify_groups('{{ g[0] }}','{{ g[1] }}','{{ g[2] }}','{{ g[3] }}')">
                            modify
                        </button>
                        <button onclick="delete_groups({{ g[0] }})">
                            delete
                        </button>
                    </td>
                </tr>
            {% endfor %}
        </table>
        <span id="groups-function"></span>
    </div>


</div>


</body>
<script type="text/javascript">
    const tab1 = document.getElementById('tab1'),
        tab2 = document.getElementById('tab2'),
        tab3 = document.getElementById('tab3'),
        tab4 = document.getElementById('tab4'),
        tab5 = document.getElementById('tab5'),
        c1 = document.getElementById('c1'),
        c2 = document.getElementById('c2'),
        c3 = document.getElementById('c3'),
        c4 = document.getElementById('c4');
    c5 = document.getElementById('c5');
    let device_function = document.getElementById('device-function');
    const type_function = document.getElementById('type-function');
    const connection_function = document.getElementById("connection-function");
    const diagram = document.getElementById("diagram");
    const groups_function = document.getElementById("groups-function");

    function changeTab1() {
        tab1.className = 'selected';
        tab2.className = '';
        tab3.className = '';
        tab4.className = '';
        tab5.className = '';
        c1.className = 'show';
        c2.className = '';
        c3.className = '';
        c4.className = '';
        c5.className = '';
    }

    function changeTab2() {
        tab1.className = '';
        tab2.className = 'selected';
        tab3.className = '';
        tab4.className = '';
        tab5.className = '';
        c1.className = '';
        c2.className = 'show';
        c3.className = '';
        c4.className = '';
        c5.className = '';
    }

    function changeTab3() {
        tab1.className = '';
        tab2.className = '';
        tab3.className = 'selected';
        tab4.className = '';
        tab5.className = '';
        c1.className = '';
        c2.className = '';
        c3.className = 'show';
        c4.className = '';
        c5.className = '';
    }

    function changeTab4() {
        tab1.className = '';
        tab2.className = '';
        tab3.className = '';
        tab4.className = 'selected';
        tab5.className = '';
        c1.className = '';
        c2.className = '';
        c3.className = '';
        c4.className = 'show';
        c5.className = '';
    }

    function changeTab5() {
        tab1.className = '';
        tab2.className = '';
        tab3.className = '';
        tab4.className = '';
        tab5.className = 'selected';
        c1.className = '';
        c2.className = '';
        c3.className = '';
        c4.className = '';
        c5.className = 'show';
    }

    const dict_t = {};
    {% for t in td2 %}
        dict_t['{{ t }}'] = {{ td2[t] }}
    {% endfor %}
    function create_xhr() {
        let XHR = [  //兼容不同浏览器和版本得创建函数数组
            function () {
                return new XMLHttpRequest()
            },
            function () {
                return new ActiveXObject("Msxml2.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Msxml3.XMLHTTP")
            },
            function () {
                return new ActiveXObject("Microsoft.XMLHTTP")
            }
        ];
        let xhr = null;
        //尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
        for (let i = 0; i < XHR.length; i++) {
            try {
                xhr = XHR[i]();
            } catch (e) {
                continue  //如果发生异常，则继续下一个函数调用
            }
            break;  //如果成功，则中止循环
        }
        return xhr;  //返回对象实例
    }

    function add_device() {
        device_function.innerHTML = "<h2>ADD</h2>\n" +
            "        <p>name:<input type=\"text\" id=\"add-device-name\" style=\"width:250px\"></p>\n" +
            "        <p>type:\n" +
            "            <select name=\"\" id=\"add-device-type\">\n" +
            "                {% for t in td %}\n"+
                "                    <option value=\"{{ td[t] }}\">{{ td[t] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>address:<input type=\"text\" id=\"add-device-addr\" style=\"width:250px\"></p>\n" +
            "        <button onclick=\"confirm_add_device()\">submit</button>"

    }

    function confirm_add_device() {
        let d_name = document.getElementById('add-device-name').value

        let d_type_block = document.getElementById('add-device-type')
        let d_type_num = d_type_block.selectedIndex
        let d_type = d_type_block.options[d_type_num].value

        let d_addr = document.getElementById('add-device-addr').value

        let command =
            {
                "name": d_name,
                "type_id": dict_t[d_type],
                "addr": d_addr
            }

        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000//equipment/addEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }

                }
            }
        }
        xhr.send(JSON.stringify(command))


    }

    function modify_device(device_id, device_name, device_type, device_addr) {
        device_function.innerHTML = "<h2>Modify</h2>\n" +
            "        <p>id:<span id=\"modify-device-id\">" + device_id + "</span></p>\n" +
            "        <p>name:<input type=\"text\" id=\"modify-device-name\"value=" + device_name + " style=\"width:250px\"></p>\n" +
            "        <p>type:\n" +
            "            <select name=\"\" id=\"modify-device-type\">\n" +
            "                {% for t in td %}\n"+
                "                    <option value=\"{{ td[t] }}\">{{ td[t] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>address:<input type=\"text\" id=\"modify-device-addr\" value=" + device_addr + " style=\"width:250px\"></p>\n" +
            "        <button onclick=\"confirm_modify_device()\">submit</button>"

        let d_type_block = document.getElementById('modify-device-type')
        makeOptionSelected(d_type_block, device_type)

    }

    function makeOptionSelected(selectBlock, optionValue) {
        for (let i = 0; i < selectBlock.options.length; i++) {
            if (selectBlock.options[i].value == optionValue) {
                selectBlock.options[i].selected = true
            }
        }
    }

    function getSelectValue(selectBlock) {
        let s_num = selectBlock.selectedIndex
        let s_value = selectBlock.options[s_num].value
        return s_value
    }

    function confirm_modify_device() {
        let d_id = document.getElementById('modify-device-id').innerText

        let d_name = document.getElementById('modify-device-name').value

        let d_type_block = document.getElementById('modify-device-type')
        let d_type_num = d_type_block.selectedIndex
        let d_type = d_type_block.options[d_type_num].value

        let d_addr = document.getElementById('modify-device-addr').value

        let command =
            {
                "id": d_id,
                "name": d_name,
                "type_id": dict_t[d_type],
                "addr": d_addr
            }

        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipment/updateEquipment", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }
                }
            }
        }
        xhr.send(JSON.stringify(command))

    }

    function confirm_delete_device(device_id) {
        let msg = "您真的确认要删除编号" + device_id + "这台设备吗？"
        let command = {
            "id": device_id
        }

        if (confirm(msg) == true) {
            let xhr = create_xhr();
            xhr.open("POST", "http://127.0.0.1:4000//equipment/deleteEquipment", true)
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                        let result = xhr.responseText //接收数据
                        console.log(result);
                        if (result == "success") {
                            alert("设备" + device_id + "已删除")
                            location.reload();
                        } else {
                            alert(result)
                        }
                    }
                }
            }
            xhr.send(JSON.stringify(command))
        }
    }

    function add_type() {
        type_function.innerHTML = "<p>name: <input type=\"text\" id=\"add-type-name\"></p>\n" +
            "            <button onclick=\"confirm_add_type()\">submit</button>"
    }

    function confirm_add_type() {
        let t_name = document.getElementById('add-type-name').value

        let command = {
            "name": t_name
        }
        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipmentType/addEquipmentType", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }
                }
            }
        }
        xhr.send(JSON.stringify(command))
    }

    function modify_type(type_id, type_name) {
        console.log('modify type')
        type_function.innerHTML = "<h2>Modify Type</h2>\n" +
            "            <p>id:<span id='modify-type-id'>" + type_id + "</span></p>\n" +
            "            <p>name: <input type=\"text\" id=\"modify-type-name\" value='" + type_name + "'></p>\n" +
            "            <p><button onclick=\"confirm_modify_type()\">submit</button></p>"
    }

    function confirm_modify_type() {
        let t_id = document.getElementById('modify-type-id').innerText
        let t_name = document.getElementById('modify-type-name').value;
        let command = {
            "id": t_id,
            "name": t_name
        }
        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipmentType/updateEquipmentType", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }
                }
            }
        }
        xhr.send(JSON.stringify(command))
    }

    function confirm_delete_type(type_id) {
        let msg = "您真的确认要删除设备类别" + type_id + "吗？"
        let command = {
            "id": type_id
        }
        if (confirm(msg) == true) {
            let xhr = create_xhr();
            xhr.open("POST", "http://127.0.0.1:4000/equipmentType/deleteEquipmentType", true)
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                        let result = xhr.responseText //接收数据
                        console.log(result);
                        if (result == "success") {
                            alert("设备类别" + type_id + "已删除")
                            location.reload();
                        } else {
                            alert(result)
                        }
                    }
                }
            }
            xhr.send(JSON.stringify(command))
        }
    }

    function connection_type_change() {
        let type_select = document.getElementById('add-connection-rt')
        let type_select_num = type_select.selectedIndex
        let r = document.getElementById('add-connection-related-id')
        r.options.length = 0
        console.log(type_select_num)
        if (type_select_num == 1) {
            {% for g in glist %}
                r.options.add(new Option("{{ g[1] }}", "{{ g[0] }}"))
            {% endfor %}
        } else {
            {% for d in devices %}
                r.options.add(new Option("{{ d[1] }}", "{{ d[0] }}"))
            {% endfor %}
        }
    }

    function add_connection() {
        connection_function.innerHTML = "<h2>Add new Connection</h2>\n" +
            "            <p>device:<select name=\"device\" id=\"add-connection-device\">\n" +
            "                {% for device in devices %}\n"+
                "                    <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>related <select name=\"\" id=\"add-connection-rt\" onchange=\"connection_type_change()\">\n" +
            "            <option value=\"DEVICE\" selected>DEVICE</option>\n" +
            "            <option value=\"GROUP\">GROUP</option>\n" +
            "        </select></p>\n" +
            "        <p>related with <select name=\"\" id=\"add-connection-related-id\">\n" +
            "            {% for device in devices %}\n"+
                "                <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "            {% endfor %}\n" +
            "        </select></p>\n" +
            "        <button onclick=\"confirm_add_connection()\">submit</button>"
    }

    function confirm_add_connection() {
        let d_block = document.getElementById('add-connection-device')
        let d_num = d_block.selectedIndex
        let d_id = d_block.options[d_num].value

        let rt_block = document.getElementById('add-connection-rt')
        let rt_num = rt_block.selectedIndex
        let rt = rt_block.options[rt_num].value

        let rt_id_block = document.getElementById('add-connection-related-id')
        let rt_id_num = rt_id_block.selectedIndex
        let rt_id = rt_id_block.options[rt_id_num].value

        let command = {
            "device_id": d_id,
            "related_type": rt,
            "related_id": rt_id
        }
        console.log(command)
        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipmentType/addEquipmentConnection", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result)
                    }
                }
            }
        }
        xhr.send(JSON.stringify(command))
    }

    function confirm_delete_connection(connection_id) {
        let msg = "您真的确认要删除绑定关系" + connection_id + "吗？"
        let command = {
            "id": connection_id
        }
        if (confirm(msg) == true) {
            let xhr = create_xhr();
            xhr.open("POST", "http://127.0.0.1:4000/equipmentType/deleteEquipmentConnection", true)
            xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (xhr.readyState == 4) {  //监听readyState状态
                    if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                        let result = xhr.responseText //接收数据
                        console.log(result);
                        if (result == "success") {
                            alert("绑定关系" + connection_id + "已删除")
                            location.reload();
                        } else {
                            alert(result);
                        }
                    }
                }
            };
            xhr.send(JSON.stringify(command));
        }
    }

    function modify_connection(c_id, d_id, rt, rt_id) {
        connection_function.innerHTML = "<h2>Modify Connection</h2>\n" +
            "            <p>id: <span id=\"modify-connection-id\"></span></p>\n" +
            "            <p>device:<select name=\"device\" id=\"modify-connection-device\">\n" +
            "                {% for device in devices %}\n"+
                "                    <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "                {% endfor %}\n" +
            "            </select></p>\n" +
            "        <p>related <select name=\"\" id=\"modify-connection-rt\" onchange=\"connection_ctype_change()\">\n" +
            "            <option value=\"DEVICE\" selected=\"\">DEVICE</option>\n" +
            "            <option value=\"GROUP\">GROUP</option>\n" +
            "        </select></p>\n" +
            "        <p>related with <select name=\"\" id=\"modify-connection-related-id\">\n" +
            "            {% for device in devices %}\n"+
                "                <option value=\"{{ device[0] }}\">{{ device[1] }}</option>\n"+
                "            {% endfor %}\n" +
            "        </select></p>\n" +
            "        <button onclick=\"confirm_modify_connection()\">submit</button>"
        let c_id_block = document.getElementById('modify-connection-id')
        c_id_block.innerText = c_id
        let d_id_block = document.getElementById('modify-connection-device')
        makeOptionSelected(d_id_block, d_id)
        let rt_block = document.getElementById('modify-connection-rt')
        makeOptionSelected(rt_block, rt)
        connection_ctype_change()
        let rt_id_block = document.getElementById('modify-connection-related-id')
        makeOptionSelected(rt_id_block, rt_id)
    }

    function connection_ctype_change() {
        let type_select = document.getElementById('modify-connection-rt')
        let type_select_num = type_select.selectedIndex
        let r = document.getElementById('modify-connection-related-id')
        r.options.length = 0
        if (type_select_num == 1) {
            {% for t in gd %}
                r.options.add(new Option("{{ gd[t] }}", "{{ t }}"))
            {% endfor %}
        } else {
            {% for d in devices %}
                r.options.add(new Option("{{ d[1] }}", "{{ d[0] }}"))
            {% endfor %}
        }
    }

    function confirm_modify_connection() {
        let c_id_block = document.getElementById('modify-connection-id')
        let d_id_block = document.getElementById('modify-connection-device')
        let rt_block = document.getElementById('modify-connection-rt')
        let rt_id_block = document.getElementById('modify-connection-related-id')
        let c_id = c_id_block.innerText
        let d_id = getSelectValue(d_id_block)
        let rt = getSelectValue(rt_block)
        let rt_id = getSelectValue(rt_id_block)
        let command = {
            "id": c_id,
            "device_id": d_id,
            "related_type": rt,
            "related_id": rt_id
        }
        {#console.log(command)#}
        let xhr = create_xhr();
        xhr.open("POST", "http://127.0.0.1:4000/equipmentType/updateEquipmentConnection", true)
        xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
            if (xhr.readyState == 4) {  //监听readyState状态
                if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
                    let result = xhr.responseText //接收数据
                    console.log(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result);
                    }
                }
            }
        };
        xhr.send(JSON.stringify(command));
    }

    function playView(id) {
        var playView = document.getElementById("playView" + id);
        var liveData = {
            "sender": "主控界面",
            "addresseeId": id
        }
        updown = playView.innerHTML;
        // console.log(updown);
        if (updown == "播放") {
            $.ajax({
                type: "POST",
                url: "/master/liveVideo",
                'data': JSON.stringify(liveData),
                dataType: "json",
                'processData': false,
                'contentType': 'application/json',
                success: function (data) {
                    playView.innerHTML = "关闭"
                    liveAddr = data.addr + "/video_feed"
                    console.log(liveAddr)
                    var liveDiv = document.getElementById('liveDiv');

                    var imgNode = document.createElement('img');
                    imgNode.src = liveAddr;
                    liveDiv.appendChild(imgNode)
                }
            });
        } else {
            playView.innerHTML = "播放"
            $('img').remove();
        }
    }

    function paramNames(id) {
        var paramNamesBtn = document.getElementById("paramNames");
        var updata = {
            "sender": "主控界面",
            "addresseeId": id,
            "command": {
                "target": "GetParamNames"
            }
        };
        // paramForm = document.getElementById("paramForm")
        $.ajax({
            type: "POST",
            url: "/master/appointEquipmentUpstream",
            'data': JSON.stringify(updata),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                $("#device-function").html("<h2>Modify Parametres</h2>")
                console.log(data)
                paramForm = document.createElement("from");
                paramForm.id = 'paramForm';
                paramForm.name = 'paramForm';
                for (var p in data.data) { //遍历json对象的每个key/value对,p为key
                    paramDiv = document.createElement("div");
                    paramDiv.style.display = "block";
                    paramForm.appendChild(paramDiv);
                    // console.log(p + " :" + data.data[p]);
                    keys = p.split("|");
                    var newEle = document.createElement("label");
                    // var paramNameText = null
                    if (keys[1] == null || keys[1] == "") {
                        newEle.innerHTML = keys[0];
                    } else {
                        newEle.innerHTML = keys[1];
                    }
                    var input = document.createElement("input");
                    input.type = "text";
                    input.name = p;
                    input.value = data.data[p];
                    input.style.cssText = "width: 400px"
                    paramDiv.appendChild(newEle);
                    paramDiv.appendChild(input);
                    paramForm.appendChild(paramDiv);
                }
                device_function.appendChild(paramForm);

                inputBut = document.createElement("input");
                inputBut.type = 'button';
                inputBut.name = 'submit';
                inputBut.value = '提交';
                inputBut.addEventListener("click", function () {
                    getFormInfo(id);
                }, false);
                device_function.appendChild(inputBut);
            }
        });
    }

    function getFormInfo(id) {
        var modifyParamsData = {}
        modifyParamsData["addresseeId"] = id
        modifyParamsData["sender"] = "主控界面"
        modifyParamsData["command"] = ergodicData('paramForm')
        {#console.log(modifyParamsData)#}

        $.ajax({
            type: "POST",
            url: "/master/appointEquipmentUpstream",
            'data': JSON.stringify(modifyParamsData),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                if (data.data == "1") {
                    $("#device-function").html("")
                    alert("修改成功")
                } else {
                    alert("修改失败")
                }

            }
        });
    }

    function search_log() {
        let search_input = document.getElementById("search-text")
        let search_text = search_input.value

        let search_data = {
            "search_text": search_text
        };

        $.ajax({
            type: "POST",
            url: "/searchLog",
            'data': JSON.stringify(search_data),
            dataType: "json",
            'processData': false,
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                if (data == null || data == '') {
                    alert("数据错误")
                } else {
                    let str = "<tr>\n" +
                        "<td>id</td>\n" +
                        "<td>task_id</td>\n" +
                        "<td>sender_id</td>\n" +
                        "<td>sender_name</td>\n" +
                        "<td>interface</td>\n" +
                        "<td>addressee_id</td>\n" +
                        "<td>addressee_name</td>\n" +
                        "<td>status_code</td>\n" +
                        "<td>describe</td>\n" +
                        "<td>implement_time</td>\n" +
                        "</tr>";
                    for (let i = 0; i < data.show_executionLog_paging.length; i++) {
                        str += "<tr><td>" + data.show_executionLog_paging[i][0] +
                            "</td><td>" + data.show_executionLog_paging[i][1] +
                            "</td><td>" + data.show_executionLog_paging[i][2] +
                            "</td><td>" + data.show_executionLog_paging[i][3] +
                            "</td><td>" + data.show_executionLog_paging[i][4] +
                            "</td><td>" + data.show_executionLog_paging[i][5] +
                            "</td><td>" + data.show_executionLog_paging[i][6] +
                            "</td><td>" + data.show_executionLog_paging[i][7] +
                            "</td><td>" + data.show_executionLog_paging[i][8] +
                            "</td><td>" + data.show_executionLog_paging[i][9] + "</td></tr>";
                    }
                    $("#table-log").html(str);
                }
            }
        });
        console.log(search_text)
    }


    // 根据父级元素的ID，来遍历ul li列表中的input name 和val 生成对象，如果全部为空则返回false
    function ergodicData(dom) {
        xDOM = $("#" + dom + " input")
        var formdata = {}
        formdata["target"] = "ModifyParams"
        for (var i = 0; i < xDOM.length; i++) {
            var a = xDOM.eq(i).attr('name')
            if (xDOM.eq(i).val() == "") {
                return false;
            } else {
                formdata[a] = xDOM.eq(i).val()
            }
        }
        return formdata;
    }

    function diagram_show() {
        window.open("brainMap");
    }

    function add_group() {
        groups_function.innerHTML = "<h2>ADD</h2>\n" +
            "<from name=\"group_modify\">" +
            "        <p>name:<input type=\"text\" id=\"modify-group-name\" style=\"width:250px\" name = \"group_name\"></p>\n" +
            "        <p>device:\n" +
            "            {% for device in devices %}\n"+
                "           <input type=\"checkbox\"  name=\"group_device\" value=\"{{ device[0] }}\">{{ device[1] }}</input>\n"
                +
                "        {% endfor %}\n" +
            "            </p>\n" +
            "        <button onclick=\"confirm_add_group()\">submit</button>" +
            "</from>"
    }

    function confirm_add_group() {
        let group_name = document.getElementById("modify-group-name").value;
        {#alert(group_id + "," + group_name)#}
        let group_devices_list = [];
        let group_devices = document.getElementsByName("group_device");
        for (let i = 0; i < group_devices.length; i++) {
            if (group_devices[i].checked) {
                group_devices_list.push(group_devices[i].value)
            }
        }
        {#alert(group_devices_list.toString());#}
        let add_group_data = {};
        add_group_data["group_name"] = group_name;
        add_group_data["group_devices_list"] = group_devices_list.toString();

        $.ajax({
            type: "POST",
            url: "/equipmentGroup/addEquipmentGroup",
            'data': JSON.stringify(add_group_data),
            'contentType': 'application/json',
            success: function (data) {
                console.log(data);
                location.reload();
            }
        });
    }

    function modify_groups(group_id, group_name, device_ids, device_names) {
        let device_idl = device_ids.split(",");

        groups_function.innerHTML = "<h2>Modify</h2>\n" +
            "<from name=\"group_modify\">" +
            "       <p>id:<input type=\"text\" id=\"modify-group-id\" name=\"group_id\" value=\"" + group_id + "\" readonly=\"readonly\"></input></p>\n" +
            "        <p>name:<input type=\"text\" id=\"modify-group-name\" value=" + group_name + " style=\"width:250px\" name = \"group_name\"></p>\n" +
            "        <p>device:\n" +
            "            {% for device in devices %}\n"+
                "           <input type=\"checkbox\"  name=\"group_device\" value=\"{{ device[0] }}\">{{ device[1] }}</input>\n"
                +
                "        {% endfor %}\n" +
            "            </p>\n" +
            "        <button onclick=\"confirm_modify_group()\">submit</button>" +
            "</from>"
        let boxes = document.getElementsByName("group_device");
        for (let i = 0; i < boxes.length; i++) {
            for (let j = 0; j < device_idl.length; j++) {
                if (boxes[i].value == device_idl[j]) {
                    boxes[i].checked = true;
                    break
                }
            }
        }
    }

    function confirm_modify_group() {
        let group_id = document.getElementById("modify-group-id").value;
        let group_name = document.getElementById("modify-group-name").value;
        {#alert(group_id + "," + group_name)#}
        let group_devices_list = [];
        let group_devices = document.getElementsByName("group_device");
        for (let i = 0; i < group_devices.length; i++) {
            if (group_devices[i].checked) {
                group_devices_list.push(group_devices[i].value)
            }
        }
        {#alert(group_devices_list.toString());#}
        let modify_group_data = {};
        modify_group_data["group_id"] = group_id;
        modify_group_data["group_name"] = group_name;
        modify_group_data["group_devices_list"] = group_devices_list.toString();


        $.ajax({
            type: "POST",
            url: "/equipmentGroup/updateEquipmentGroup",
            'data': JSON.stringify(modify_group_data),
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                location.reload();
            }
        });
    }

    function delete_groups(group_id) {
        let delete_group_data = {}
        delete_group_data["group_id"] = group_id;
        $.ajax({
            type: "POST",
            url: "/equipmentGroup/deleteEquipmentGroup",
            'data': JSON.stringify(delete_group_data),
            'contentType': 'application/json',
            success: function (data) {
                console.log(data)
                location.reload();
            }
        });
    }

</script>
</html>
